<template>
  <fieldset>
    <legend>父亲组件</legend>
    <!-- 这里的v-model一定要写,否则data里面的val获取不到输入框里面的值,添加的时候就会一直为空 -->
    <input type="text" v-model="val" />
    <button @click="add">添加</button>
    <!-- 接收这个事件，并且绑定一个data，用来向子组件传递处理好之后的arr数据 -->
    <child :data="dt" @to-child="clear"></child>
  </fieldset>
</template>
<script>
import Input from "../组件传值-子传父/Input.vue";
import child from "./child.vue";
export default {
  data() {
    return {
      val: "",//输入框的值
      dt: "",//这里定义一个空的变量来保存传过来的arr数据
    };
  },
  components: {
    child,
    Input,
  },
  methods: {
    clear(param) {
      console.log(param);
      this.dt = param; //将param赋值给data里面的dt,方便在下面的add点击事件里面能够获取到param
      // console.log(param);
      // this.val = ""
      //return param;
    },
    add() {
      console.log(this.dt);
      console.log(this.val);
      this.dt.push(this.val);
      console.log(this.dt);
      this.val = "";//输入之后将输入框置为空
    },
  },
};
</script>
